import React, { Component } from 'react';
import { connect } from 'dva';
import {Button,Table,Modal,Icon,message} from 'antd';
import './less/report.less';
import DrawerAddShareloder from './AddShareholder';
import DrawerAddZiShareloder from './AddZiShareloder';
import PTable from "../../../components/Pro/PTable";
import InitializationStock from'./InitializationStock';
import ChangeOwnership from './ChangeOwnership';
import ShareholderChangeLog from './ShareholderChangeLog';
import { getCompanyShareHolder, getCompanyValidShare,deleteShareholder } from "../../../services/api";

const confirm = Modal.confirm;
let idx1 = 1;
let idx2 = 1;

export default class Shareholder extends Component {
  constructor(props,context){
    super(props,context);
    this.state = {
      initPage:0,
      number: 1,
      forceUpdate: false,
      visible:false,
      openAddShareolder:false,//新增机构股东
      openAddZiShareolder:false,//新增自然人股东
      addShareolderId:0,//新增机构股东id
      addZiShareolderId:0,//新增自然人股东id
      holderInitVisible:true, //默认显示股权初始化按钮
      holderSize:0,//股东人数
      pageParm: {
        // comId: "1",
        pageSize: "10",
        pageNumber: "1"
      },
      initializationStockVisible:false,
      changeOwnershipVisible:false,
      shareholderChangelogVisible:false,
    };
  }

  //页面渲染后，执行方法
  componentDidMount() {
  }

  //table 数据变化
  validShareDateTableChange = (data) => {
    this.setState({number: data.total});
    if (data.total > 0) {
      this.setState({holderInitVisible: false});
    }
  };

  validShareList = () => {
    const columns = [
      {
        title: '股东',
        key: 'name',
        dataIndex:'name',
      },
      {
        title: '证件号',
        dataIndex: 'cerNo',
        key: 'cerNo',
      },
      {
        title: '出资额',
        key: 'contributionAmount',
        dataIndex: 'contributionAmount',
      },
      {
        title: '出资方式',
        key: 'contributionModeStr',
        dataIndex: 'contributionModeStr',
      },
      {
        title: '所占比例',
        key: 'contributionPropStr',
        dataIndex: 'contributionPropStr',
      },
    ];
    return (
      <PTable
        columns={columns}
        url="getCompanyValidShare"
        pageParm={this.state.pageParm}
        dateChange={this.validShareDateTableChange}
        forceUpdate={this.state.forceUpdate}
        style={{ marginTop: '16px' }}
      />
    );

  };

  //删除
  showDeleteConfirm = (id) => {
    confirm({
      title: '是否删除所选信息，删除后无法找回。是否确认删除？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        // 报表删除
        deleteShareholder({"shareholderId": id}).then((data) => {
          console.log(data);
          this.changePersonState();
        }, (err) => {
          console.log(err);
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };


  //新增股东和新增自然人股东刷新列表
  changePersonState = () => {
    this.setState({
      forceUpdate: true,
    }, () => {
      this.setState({
        forceUpdate: false,
      })
    });
  };


  stockholderDateTableChange = (data) => {
    this.setState({number: data.total});
    if (data.total > 0) {
      this.setState({holderSize:data.total});
    }
  };

  stockholderList = () => {
    const columns = [
      {
        title: '名称/姓名',
        key: 'name',
        dataIndex:'name',
      },
      {
        title: '类型',
        dataIndex: 'shareholderTypeStr',
        key: 'shareholderTypeStr',
      },
      {
        title: '证件类型',
        key: 'cardTypeStr',
        dataIndex: 'cardTypeStr',
      },
      {
        title: '证件号',
        key: 'cerNo',
        dataIndex: 'cerNo',
      },
      {
        title: '地址',
        key: 'a',
        dataIndex: 'a',
        width:220,
        render: (text, record) => (
          <p style={{"overflow": "hidden",
            "textOverflow": "ellipsis",
            "whiteSpace": "nowrap",
            "width": "180px"}}>
            {record.address}
          </p>
        )
      },
      {
        title: '操作',
        key: '5',
        dataIndex: '5',
        render: (text, record) => (
          <div>
            <span
              key={text}
              style={{color: "#0F71FF", cursor: "pointer", marginRight: "20px"}}
              onClick={this.showShareloder.bind(this,record.shareholderType,record.shareholderId)}
            >修改</span>
            <span style={{color: "#0F71FF", cursor: "pointer"}}
                  onClick={this.showDeleteConfirm.bind(this, record.shareholderId)}>删除</span>
          </div>
        )
      },
    ];
    return (
      <PTable
        columns={columns}
        url="getCompanyShareHolder"
        pageParm={this.state.pageParm}
        dateChange={this.stockholderDateTableChange}
        forceUpdate={this.state.forceUpdate}
        style={{ marginTop: '16px' }}
      />
    );
  };

  showShareloder = (type,id) =>{
    // alert('type:'+type+'id:'+id); shareholderChangelogVisible
    if(type === "2"){
      this.setState({
        addShareolderId:id,
        openAddShareolder : true,
        idx2: ++idx2,
        init:0,
      },() => {
        // this.setState({  });
      });
    }else if(type === "1"){
      this.setState({
        addZiShareolderId:id,
        openAddZiShareolder : true,
        idx1: ++idx1,
        init:0,
      },() =>{
        // this.setState({  });
      });
    }
    console.log(this.state);
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  handleEquity = () => {
    if (this.state.holderSize === 0) {
      message.info("请先添加股东");
    } else {
      this.setState({
        visible: true,
      });
      this.props.props.history.push(`/enterprise/reported/initializationstock`);
    }
  };

  //抽屉视图处理
  changeDrawer = (openAddShareolder) => {
    this.setState({
      openAddShareolder:true,
      addShareolderId:0,
      init:0,
    });
  };
  changeDrawerTwo = (openAddZiShareolder) => {
    this.setState({
      openAddZiShareolder:true,
      addZiShareolderId:0,
      init:0,
    });
  };

  //是否显示
  isTrueXian = () => {
    let display;
    if(this.state.initializationStockVisible || this.state.changeOwnershipVisible || this.state.shareholderChangelogVisible){
      return display = {display:'none'};
    }else{
      return display = {display:'block'};
    }
    if(this.state.changeOwnershipVisible){
      this.setState({
        changeOwnershipVisible:true,
      })
    }else{
      this.setState({
        changeOwnershipVisible:false,
      })
    }
    if(this.state.shareholderChangelogVisible){
      this.setState({
        shareholderChangelogVisible:true,
      })
    }else{
      this.setState({
        shareholderChangelogVisible:false,
      })
    }
    if(this.state.InitializationStockVisible){
      this.setState({
        initializationStockVisible:true,
      })
    }else{
      this.setState({
        initializationStockVisible:false,
      })
    }
  };

  callbackOne = () =>{
    this.setState({initializationStockVisible:false});
    this.setState({changeOwnershipVisible:false});
    // this.ajaxInsPage();
    this.setState({forceUpdate: true},()=>{this.setState({
      forceUpdate: false
    })});
  };

  // callbackTwo = () =>{
  //   this.setState({shareholderChangelogVisible:false});
  //   // this.ajaxInsPage();
  //   this.setState({forceUpdate: true},()=>{this.setState({
  //     forceUpdate: false
  //   })});
  // };
  switchToChangeOwnership = () =>{
    this.setState({
      initializationStockVisible:false,
      changeOwnershipVisible:true,
      shareholderChangelogVisible:false,
    });
  }

  initial = () => {
    this.setState({
      initializationStockVisible:false,
      changeOwnershipVisible:false,
      shareholderChangelogVisible:false,
    });
    console.log(this.state);
  };

  changeBack = () => {
    this.setState({
      initializationStockVisible:false,
      changeOwnershipVisible:true,
      shareholderChangelogVisible:false,
    });
  };

  render() {
    console.log("开始渲染");
    return (
      <div className="Shareholder">
        <div style={this.isTrueXian()}>
        <h2>
          <i />
          <span>股权结构</span>
        </h2>
        <div className="share_button">
          {this.state.holderInitVisible && (
            // <Button type="primary" onClick={this.handleEquity}>股权初始化</Button>
            <Button type="primary" onClick={()=>{
              this.setState({
                initializationStockVisible:true,
              });
            }}>股权初始化</Button>
          )}
          <Button onClick={()=>{
            // this.props.props.history.push(`/enterprise/reported/changeownership`);
            this.setState({
              changeOwnershipVisible:true,
            });
          }}>股权调整</Button>
          <Button onClick={()=>{
            // this.props.props.history.push(`/enterprise/reported/shareholderchangelog`);
            this.setState({
              shareholderChangelogVisible:true,
            });
          }}>股权调整记录</Button>
        </div>
        {this.validShareList()}
        <h2 style={{ marginTop:'16px' }}>
          <i className="dong" />
          <span>股东信息</span>
        </h2>
        <div className="share_button">
          <Button type="primary" onClick={this.changeDrawer.bind(this,true)}>新增机构股东</Button>
          <Button onClick={this.changeDrawerTwo.bind(this,true)}>新增自然人股东</Button>
        </div>
        {this.stockholderList()}

        {/*股权初始化弹窗*/}
        <Modal title="股权初始化"
               visible={this.state.visible}
               onCancel={this.handleCancel}
               footer={null}
               className="shareholder_wed"
        >
          <div className="modal-equity">
            <p><Icon type="exclamation-circle" style={{ fontSize: 24, color: '#FFBF00' }}/>
              <span>在股权初始化前，请根据企业在工商局登记的内容，完整补充各股东信息。</span>
            </p>
            <div className="line" />
            <div className="modal_footer">
              <Button type="primary" onClick={this.changeDrawer.bind(this,true)}>新增机构股东</Button>
              <Button type="primary" ghost onClick={this.changeDrawerTwo.bind(this,true)}>新增自然人股东</Button>
              <Button onClick={this.handleCancel}>取消</Button>
            </div>
          </div>
        </Modal>
        <DrawerAddShareloder onChange={(openAddShareolder)=>{this.setState({openAddShareolder:openAddShareolder})}} visiable={this.state.openAddShareolder} addShareolderId={this.state.addShareolderId} idx={this.state.idx2} init={this.state.init} forceUpdate={this.changePersonState}/>
        <DrawerAddZiShareloder onChange={(openAddZiShareolder)=>{this.setState({openAddZiShareolder:openAddZiShareolder})}} visiable={this.state.openAddZiShareolder} addZiShareolderId={this.state.addZiShareolderId} idx={this.state.idx1} init={this.state.init} forceUpdate={this.changePersonState}/>
        </div>
        {this.state.initializationStockVisible && <InitializationStock close={this.initial} visible={this.state.initializationStockVisible}/>}
        {this.state.changeOwnershipVisible && <ChangeOwnership close={this.callbackOne} visible={this.state.changeOwnershipVisible}/>}
        {this.state.shareholderChangelogVisible && <ShareholderChangeLog close={this.initial} switchToChangeOwnership={this.switchToChangeOwnership} visible={this.state.shareholderChangelogVisible}/>}
        </div>
    );
  }
}
